<template>
    <div>
        <div class="zbclass">
            <!-- 标题 -->
            <div class="zbclass_title">直播课程</div>
            <div class="zbclass_content">
                <!-- 左边tab切换内容 -->
                <div class="zbclass_content_left">
                    <!-- 一 -->
                    <div class="zbclass_content_left_one">
                        <img :src="lming[index]" alt="" class="zbclass_content_left_one_img">
                        <div>
                            <div>{{ltitle[index]}}</div>
                            <div>{{lcontent[index]}}</div>
                            <div class="zbclass_content_left_one_bottom">{{lcontent[index]}}</div>
                        </div>
                    </div>
                    <!-- 二 -->
<!--                    <div class="zbclass_content_left_two">-->
<!--                        <img src="../../assets/images/QQ图片20200711172240_05.png" alt="" class="zbclass_content_left_two_img">-->
<!--                        <div>-->
<!--                            <div>十大经典排序之Part-6-完结篇</div>-->
<!--                            <div>直播结束</div>-->
<!--                            <div class="zbclass_content_left_two_bottom">直播结束</div>-->
<!--                        </div>-->

<!--                    </div>-->
<!--                    &lt;!&ndash; 三 &ndash;&gt;-->
<!--                    <div class="zbclass_content_left_three makedisplay">-->
<!--                        <img src="../../assets/images/QQ图片20200711172240_05.png" alt="" class="zbclass_content_left_three_img">-->
<!--                        <div>-->
<!--                            <div>jdk1.8-新特性之函数式接口与方法引用</div>-->
<!--                            <div>直播结束</div>-->
<!--                            <div class="zbclass_content_left_three_bottom">直播结束</div>-->
<!--                        </div>-->

<!--                    </div>-->
<!--                    &lt;!&ndash; 四 &ndash;&gt;-->
<!--                    <div class="zbclass_content_left_four makedisplay">-->
<!--                        <img src="../../assets/images/QQ图片20200711172240_05.png" alt="" class="zbclass_content_left_four_img">-->
<!--                        <div>-->
<!--                            <div>高考之殇与痛则思变</div>-->
<!--                            <div>尚未开播</div>-->
<!--                            <div class="zbclass_content_left_four_bottom">尚未开播</div>-->
<!--                        </div>-->

<!--                    </div>-->
                </div>
                <!-- 右边tab切换 -->
                <div class="zbclass_content_right">
                    <div class="zbclass_content_right_one" v-for="(item,index) in tabright" :key="index" @mouseenter="changeTab(index)">
                        <span ><img src="../../assets/images/duihao.png" alt=""></span>
                        <span>{{item.rtitle }}</span>
                        <span>{{item.rcontent }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "LiveCourse",
        props: {

        },
        data() {
            return {
                tabright:[{rtitle:'直播结束',rcontent:'研究生复试之高效准备简历的方法',rimg:"../../assets/images/duihao.png"},{rtitle:'直播结束',rcontent:'十大经典排序之Part-6-完结篇',rimg:"../../assets/images/duihao.png"},{rtitle:'直播结束',rcontent:'jdk1.8-新特性之函数式接口与方法引用',rimg:"../../assets/images/duihao.png"},{rtitle:'尚未开播',rcontent:'高考之殇与痛则思变',rimg:"../../assets/images/bofang.png"}],
                rtitle:['直播结束','直播结束','直播结束','尚未开播'],
                rcontent:['研究生复试之高效准备简历的方法','十大经典排序之Part-6-完结篇','jdk1.8-新特性之函数式接口与方法引用','高考之殇与痛则思变'],
                rimg:["@/assets/images/duihao.png","@/assets/images/duihao.png","@/assets/images/duihao.png","@/assets/images/bofang.png"],
                flag:true,

                lming:["https://online-course.nos-eastchina1.126.net/123-1252130152859566080.png","https://online-course.nos-eastchina1.126.net/数据结构与算法 基础篇 拷贝-1252123020651134976.jpg","https://online-course.nos-eastchina1.126.net/封面-1258625253353979904.png","https://online-course.nos-eastchina1.126.net/直播封面-1254953535796150272.png"],
                ltitle:["研究生复试之高效准备简历的方法","十大经典排序之Part-6-完结篇","jdk1.8-新特性之函数式接口与方法引用","高考之殇与痛则思变"],
                lcontent:["直播结束","直播结束","直播结束","尚未开播"],
                index:0
            }
        },
        methods:{
            changeTab(index){
                // console.log(index)
                this.index = index
                console.log(this.index)
            }
        }
    }
</script>

<style scoped>
    .zbclass {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 58px;
    }

    .zbclass_title {
        font-size: 26px;
        text-align: center;

    }
    .zbclass_content{
        margin-top: 35px;
    }
    .zbclass_content_left,
    .zbclass_content_right {
        float: left;
        width: 49%;
    }
    .zbclass_content_right>div:hover{
        color: #00cf8c;
        border-left: 3px solid #00cf8c;
    }
    /* tab切换左内容一 */
    .zbclass_content_left_one {
        position: relative;
        height: 350px;
        overflow: hidden;
    }
    .zbclass_content_left_one_img{    height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 5px;}
    .zbclass_content_left_one>div{       padding: 80px 50px;
        height: 350px;
        background-color: rgba(0,0,0,.6);
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;}
    .zbclass_content_left_one>div>div:nth-of-type(1){
        font-size: 22px;
        text-align: center;
        margin-top: 40px;
        color: white;
    }
    .zbclass_content_left_one>div>div:nth-of-type(2){
        font-size: 12px;
        text-align: center;
        margin-top: 20px;
        color: white;
    }

    .zbclass_content_left_one_bottom{
        width: 180px;
        height: 50px;
        font-size: 18px;
        background-color:#00cf8c ;
        color: white;
        border-radius: 10px;
        text-align: center;
        line-height: 50px;
        margin: 0 auto;
        margin-top: 20px;
        cursor: pointer;
    }

    /* tab切换左内容二 */
    .zbclass_content_left_two {
        position: relative;
        height: 350px;
        overflow: hidden;
        display: none;
    }
    .zbclass_content_left_two_img{    height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 5px;}
    .zbclass_content_left_two>div{       padding: 80px 50px;
        height: 350px;
        background-color: rgba(0,0,0,.6);
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;}
    .zbclass_content_left_two>div>div:nth-of-type(1){
        font-size: 22px;
        text-align: center;
        margin-top: 40px;
        color: white;
    }
    .zbclass_content_left_two>div>div:nth-of-type(2){
        font-size: 12px;
        text-align: center;
        margin-top: 20px;
        color: white;
    }

    .zbclass_content_left_two_bottom{
        width: 180px;
        height: 50px;
        font-size: 18px;
        background-color:#00cf8c ;
        color: white;
        border-radius: 10px;
        text-align: center;
        line-height: 50px;
        margin: 0 auto;
        margin-top: 20px;
        cursor: pointer;
    }
    /* tab切换左内容三 */
    .zbclass_content_left_three {
        position: relative;
        height: 350px;
        overflow: hidden;
    }
    .zbclass_content_left_three_img{    height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 5px;}
    .zbclass_content_left_three>div{       padding: 80px 50px;
        height: 350px;
        background-color: rgba(0,0,0,.6);
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;}
    .zbclass_content_left_three>div>div:nth-of-type(1){
        font-size: 22px;
        text-align: center;
        margin-top: 40px;
        color: white;
    }
    .zbclass_content_left_three>div>div:nth-of-type(2){
        font-size: 12px;
        text-align: center;
        margin-top: 20px;
        color: white;
    }

    .zbclass_content_left_three_bottom{
        width: 180px;
        height: 50px;
        font-size: 18px;
        background-color:#00cf8c ;
        color: white;
        border-radius: 10px;
        text-align: center;
        line-height: 50px;
        margin: 0 auto;
        margin-top: 20px;
        cursor: pointer;
    }
    /* tab切换左内容四 */
    .zbclass_content_left_four {
        position: relative;
        height: 350px;
        overflow: hidden;
    }
    .zbclass_content_left_four_img{    height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 5px;}
    .zbclass_content_left_four>div{       padding: 80px 50px;
        height: 350px;
        background-color: rgba(0,0,0,.6);
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;}
    .zbclass_content_left_four>div>div:nth-of-type(1){
        font-size: 22px;
        text-align: center;
        margin-top: 40px;
        color: white;
    }
    .zbclass_content_left_four>div>div:nth-of-type(2){
        font-size: 12px;
        text-align: center;
        margin-top: 20px;
        color: white;
    }

    .zbclass_content_left_four_bottom{
        width: 180px;
        height: 50px;
        font-size: 18px;
        background-color:#00cf8c ;
        color: white;
        border-radius: 10px;
        text-align: center;
        line-height: 50px;
        margin: 0 auto;
        margin-top: 20px;
        cursor: pointer;
    }


    .zbclass_content_right{
        background-color: #f4f4f4;
        height: 350px;
        border: 1px solid #f4f4f4;
    }
    .zbclass_content_right>div{
        height: 50px;
        line-height: 50px;
        padding-left: 4%;
    }
    .zbclass_content_right>div>span:nth-of-type(2){
        margin-left: 20px;
    }
    .zbclass_content_right>div>span:nth-of-type(3){
        margin-left: 40px;
    }
</style>
